<!-- 打包管理 - 预打包库存 列表 -->
<template>
  <div style="padding: 15px;">
    <vxe-toolbar
      id="warehouseLocationId"
      :custom="{ storage: true }"
      export
      :refresh="{query: findList}"
    >
      <template v-slot:buttons>
        <div class="btnMargin">
          <el-button @click="findList">查询</el-button>
        </div>
      </template>
    </vxe-toolbar>
    <vxe-table
      ref="xTable"
      border
      resizable
      stripe
      highlight-current-row
      show-footer
      highlight-hover-row
      row-id="id"
      :loading="loading"
      class="mytable-footer"
      height="640"
      align="center"
      export-config
      :data="tableData"
      :edit-config="{ trigger: 'click', mode: 'row', showStatus: true }"
      :sort-config="{ remote: true}"
      :seq-config="{startIndex: listQuery.pageNum * listQuery.pageSize - listQuery.pageSize}"
    >
      <vxe-table-column type="seq" width="60"></vxe-table-column>
      <vxe-table-column type="checkbox" width="60"></vxe-table-column>
      <vxe-table-column>
        <vxe-table-column field="shipmentName" title="入驻商" min-width="150" sortable />
        <template v-slot:header="{ column }">
          <el-select v-model="listQuery.shipmentCode" clearable filterable placeholder="入驻商">
            <el-option
              v-for="item in options"
              :key="item.partyCode"
              :label="item.userName"
              :value="item.partyCode">
            </el-option>
          </el-select>
        </template>
      </vxe-table-column>
      <vxe-table-column>
        <vxe-table-column field="warehouseName" title="仓库" min-width="150" sortable />
        <template v-slot:header="{ column }">
          <el-select v-model="listQuery.warehouseCode" placeholder="仓库 " style="width:100%" clearable>
            <el-option
              v-for="item in warehouseData"
              :key="item.code"
              :label="item.name"
              :value="item.code"
            />
          </el-select>
        </template>
      </vxe-table-column>
      <vxe-table-column field="warehouseSpaceName" title="库区" min-width="150" sortable />
      <vxe-table-column>
        <vxe-table-column field="locationName" title="库位" min-width="150" sortable />
        <template v-slot:header="{ column }">
          <el-input v-model="listQuery.locationName" placeholder="库位" clearable />
        </template>
      </vxe-table-column>
      <vxe-table-column>
        <vxe-table-column field="goodsName" title="商品名称" min-width="150" sortable />
        <template v-slot:header="{ column }">
          <el-input v-model="listQuery.goodsName" placeholder="商品名称" clearable />
        </template>
      </vxe-table-column>
      <vxe-table-column>
        <vxe-table-column field="goodCode" title="商品编码" min-width="150" sortable />
        <template v-slot:header="{ column }">
          <el-input v-model="listQuery.goodCode" placeholder="商品编码" clearable />
        </template>
      </vxe-table-column>
      <vxe-table-column>
        <vxe-table-column field="quantity" title="库存数量" min-width="300" sortable  />
        <template v-slot:header="{ column }">
          <el-input
            v-model="listQuery.quantityFloor"
            placeholder="下限"
            clearable
            style="width: 45%"
            type='number'
          />
          -
          <el-input
            v-model="listQuery.quantityCeiling"
            placeholder="上限"
            clearable
            style="width: 45%"
            type='number'
          />
        </template>
      </vxe-table-column>
      <vxe-table-column>
        <vxe-table-column field="spec" title="规格" min-width="150" sortable />
        <template v-slot:header="{ column }">
          <el-input v-model="listQuery.spec" placeholder="规格" clearable />
        </template>
      </vxe-table-column>
      <!-- <vxe-table-column>
        <vxe-table-column field="wavePickingCode" title="入库批次" min-width="150" sortable />
        <template v-slot:header="{ column }">
          <el-input v-model="listQuery.wavePickingCode" placeholder="入库批次" clearable />
        </template>
      </vxe-table-column> -->
      <vxe-table-column>
        <vxe-table-column field="tempCode" title="关联单号" min-width="150" sortable />
        <template v-slot:header="{ column }">
          <el-input v-model="listQuery.tempCode" placeholder="关联单号" clearable />
        </template>
      </vxe-table-column>
    </vxe-table>
    <vxe-pager
      :loading="loading"
      :current-page.sync="listQuery.pageNum"
      :page-size.sync="listQuery.pageSize"
      :total="listQuery.total"
      :layouts="[
        'PrevJump',
        'PrevPage',
        'Number',
        'NextPage',
        'NextJump',
        'Sizes',
        'FullJump',
        'Total',
      ]"
      :page-sizes="[10, 15, 20, 50, 100, 500, 1000]"
      @page-change="handlePageChange"
    />
  </div>
</template>
<script>
import { inventoryList } from '@/api/packManagement/prePackaged'
import { shipments } from "@/api/outStorage"; // 入驻商接口
import { getWarehouse } from '@/api/basicInfo' // 仓库接口
export default {
  data() {
    return {
      loading: false,
      tableData: [],
      listQuery: {},
      options: [],
      warehouseData: []
    }
  },
  created() {
    this.findList()
  },
  methods: {
    findList() {
      this.loading = true
      // 入驻商 - 仓库
      shipments().then(res => {
        this.options = res.data
      })
      getWarehouse().then(response => {
        this.warehouseData = response.data
      })
      return inventoryList(this.listQuery).then(response => {
        this.tableData = response.data.records
        this.listQuery.total = response.data.total
      }).finally(() => {
        this.loading = false
      })
    },
    // 分页handle
    handlePageChange({currentPage, pageSize}) {
      this.listQuery.pageNum = currentPage
      this.listQuery.pageSize = pageSize
      this.findList()
    },
  }
}
</script>
<style scoped>

</style>
